<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>资讯详情 - 量子计算原型机取得重大突破</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #2563eb;
            --primary-light: #3b82f6;
            --primary-dark: #1d4ed8;
            --gray-50: #f9fafb;
            --gray-100: #f3f4f6;
            --gray-200: #e5e7eb;
            --gray-300: #d1d5db;
            --gray-400: #9ca3af;
            --gray-500: #6b7280;
            --gray-600: #4b5563;
            --gray-700: #374151;
            --gray-800: #1f2937;
            --text-primary: #111827;
            --text-secondary: #4b5563;
            --radius: 8px;
            --shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--gray-50);
            color: var(--text-primary);
            padding-top: 50px;
            padding-bottom: 60px;
            line-height: 1.6;
        }
        
        /* 导航栏样式 */
        .navbar {
            height: 50px;
            background-color: white;
            border-bottom: 1px solid var(--gray-200);
            padding: 0 15px;
        }
        
        .navbar-brand {
            color: var(--text-primary);
            font-weight: 600;
            font-size: 1.1rem;
        }
        
        .nav-actions {
            display: flex;
            gap: 15px;
            font-size: 1.1rem;
            color: var(--gray-600);
        }
        
        /* 文章内容容器 */
        .article-container {
            background-color: white;
            padding: 15px;
            margin-bottom: 10px;
        }
        
        /* 文章标题 */
        .article-title {
            font-size: 1.3rem;
            font-weight: 600;
            line-height: 1.4;
            margin-bottom: 12px;
        }
        
        /* 文章元数据 */
        .article-meta {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            font-size: 0.8rem;
            color: var(--gray-600);
        }
        
        .author-info {
            display: flex;
            align-items: center;
            margin-right: 15px;
        }
        
        .author-avatar {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            margin-right: 6px;
            object-fit: cover;
        }
        
        .publish-time {
            margin-right: 15px;
        }
        
        .article-category {
            color: var(--primary);
        }
        
        /* 文章内容 */
        .article-content {
            font-size: 0.95rem;
            color: var(--text-primary);
        }
        
        .article-content p {
            margin-bottom: 15px;
        }
        
        .article-image {
            width: 100%;
            border-radius: var(--radius);
            margin: 15px 0;
        }
        
        .image-caption {
            font-size: 0.8rem;
            color: var(--gray-500);
            text-align: center;
            margin-top: -10px;
            margin-bottom: 15px;
        }
        
        .article-video {
            width: 100%;
            border-radius: var(--radius);
            margin: 15px 0;
            aspect-ratio: 16/9;
            background-color: #000;
            position: relative;
        }
        
        .video-play-btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 50px;
            height: 50px;
            background-color: rgba(0,0,0,0.6);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
        }
        
        .article-quote {
            border-left: 3px solid var(--primary);
            padding: 8px 12px;
            margin: 15px 0;
            background-color: var(--gray-50);
            font-size: 0.9rem;
            color: var(--gray-700);
        }
        
        /* 标签容器 */
        .tags-container {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin: 15px 0;
        }
        
        .article-tag {
            padding: 3px 10px;
            background-color: var(--gray-100);
            border-radius: 12px;
            font-size: 0.75rem;
            color: var(--gray-600);
        }
        
        /* 文章操作区 */
        .article-actions {
            display: flex;
            justify-content: space-around;
            padding: 12px 0;
            border-top: 1px solid var(--gray-100);
            border-bottom: 1px solid var(--gray-100);
            margin: 10px 0;
        }
        
        .action-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: var(--gray-600);
            font-size: 0.7rem;
        }
        
        .action-btn i {
            font-size: 1rem;
            margin-bottom: 3px;
        }
        
        .action-btn.active {
            color: var(--primary);
        }
        
        /* 相关推荐 */
        .related-articles {
            background-color: white;
            padding: 15px;
            margin-bottom: 10px;
        }
        
        .section-title {
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
        }
        
        .section-title::after {
            content: "";
            flex: 1;
            height: 1px;
            background-color: var(--gray-200);
            margin-left: 10px;
        }
        
        .related-item {
            display: flex;
            gap: 10px;
            padding: 8px 0;
            border-bottom: 1px solid var(--gray-100);
        }
        
        .related-item:last-child {
            border-bottom: none;
        }
        
        .related-image {
            width: 80px;
            height: 80px;
            border-radius: var(--radius);
            object-fit: cover;
            flex-shrink: 0;
        }
        
        .related-content {
            flex: 1;
        }
        
        .related-title {
            font-size: 0.9rem;
            font-weight: 500;
            line-height: 1.3;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin-bottom: 5px;
        }
        
        .related-source {
            font-size: 0.75rem;
            color: var(--gray-500);
        }
        
        /* 评论区 */
        .comments-section {
            background-color: white;
            padding: 15px;
        }
        
        .comments-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .comments-count {
            font-size: 0.9rem;
            font-weight: 500;
        }
        
        .sort-comments {
            font-size: 0.8rem;
            color: var(--gray-500);
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        /* 评论输入框 */
        .comment-input-container {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        
        .user-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }
        
        .comment-input-box {
            flex: 1;
        }
        
        .comment-input {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid var(--gray-200);
            border-radius: 20px;
            font-size: 0.85rem;
            background-color: var(--gray-50);
            resize: none;
            height: 80px;
        }
        
        .input-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 8px;
        }
        
        .input-action-btn {
            color: var(--gray-500);
            font-size: 0.9rem;
        }
        
        .submit-comment {
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 15px;
            padding: 3px 12px;
            font-size: 0.8rem;
        }
        
        /* 评论列表 */
        .comments-list {
            margin-bottom: 20px;
        }
        
        .comment-item {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
        }
        
        .comment-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }
        
        .comment-content {
            flex: 1;
        }
        
        .comment-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
        }
        
        .comment-author {
            font-size: 0.8rem;
            font-weight: 500;
        }
        
        .comment-time {
            font-size: 0.7rem;
            color: var(--gray-500);
        }
        
        .comment-text {
            font-size: 0.85rem;
            margin-bottom: 8px;
            padding: 8px 10px;
            background-color: var(--gray-50);
            border-radius: var(--radius);
        }
        
        .comment-actions {
            display: flex;
            gap: 15px;
            font-size: 0.75rem;
            color: var(--gray-500);
        }
        
        .comment-action {
            display: flex;
            align-items: center;
            gap: 3px;
        }
        
        .comment-action.active {
            color: #dc2626;
        }
        
        /* 回复列表 */
        .replies-list {
            margin-left: 46px;
            margin-top: 10px;
        }
        
        .reply-item {
            display: flex;
            gap: 8px;
            margin-bottom: 10px;
        }
        
        .reply-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }
        
        .reply-content {
            flex: 1;
        }
        
        .reply-text {
            font-size: 0.8rem;
            margin-bottom: 5px;
            padding: 6px 8px;
            background-color: var(--gray-50);
            border-radius: var(--radius);
        }
        
        .reply-text .reply-to {
            color: var(--primary);
        }
        
        /* 回复输入框 */
        .reply-input-container {
            display: flex;
            gap: 8px;
            margin-top: 10px;
            margin-left: 46px;
        }
        
        .reply-input {
            flex: 1;
            padding: 6px 10px;
            border: 1px solid var(--gray-200);
            border-radius: 15px;
            font-size: 0.8rem;
            background-color: var(--gray-50);
        }
        
        .reply-submit {
            color: var(--primary);
            font-size: 0.8rem;
            border: none;
            background: none;
            padding: 0 8px;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 55px;
            background-color: white;
            border-top: 1px solid var(--gray-200);
            display: flex;
            justify-content: space-around;
            align-items: center;
            z-index: 1000;
        }
        
        .nav-tab {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 0.65rem;
            color: var(--gray-600);
            text-decoration: none;
        }
        
        .nav-tab i {
            font-size: 1rem;
            margin-bottom: 3px;
        }
        
        .nav-tab.active {
            color: var(--primary);
        }
        
        /* 标签样式 */
        .article-tag {
            display: inline-block;
            padding: 2px 8px;
            font-size: 0.7rem;
            border-radius: 4px;
            margin-right: 5px;
        }
        
        .tag-hot {
            background-color: #fee2e2;
            color: #dc2626;
        }
        
        .tag-new {
            background-color: #dbeafe;
            color: #1e40af;
        }
        
        .tag-video {
            background-color: #e0f2fe;
            color: #0284c7;
        }
        
        /* 适配小屏幕 */
        @media (max-width: 320px) {
            .article-title {
                font-size: 1.2rem;
            }
            
            .related-image {
                width: 70px;
                height: 70px;
            }
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <nav class="navbar fixed-top">
        <div class="container-fluid d-flex justify-content-between align-items-center">
            <a href="#" class="nav-back" style="text-decoration: none; color: var(--text-primary);">
                <i class="fas fa-arrow-left"></i>
            </a>
            <span class="navbar-brand">资讯详情</span>
            <div class="nav-actions">
                <i class="fas fa-share-alt"></i>
                <i class="fas fa-ellipsis-v"></i>
            </div>
        </div>
    </nav>
    
    <!-- 文章内容 -->
    <div class="article-container">
        <h1 class="article-title">我国量子计算原型机"九章三号"实现255个光子操纵，计算能力再突破</h1>
        
        <div class="article-meta">
            <div class="author-info">
                <img src="https://picsum.photos/id/64/100" alt="作者头像" class="author-avatar">
                <span>量子计算研究中心</span>
            </div>
            <span class="publish-time">2023-09-15 09:30</span>
            <span class="article-category">科技</span>
        </div>
        
        <div class="article-content">
            <p>近日，我国科学家在量子计算领域取得重大突破，最新研制的"九章三号"量子计算原型机在高斯玻色取样问题上实现255个光子操纵，计算能力较此前提升百万倍，再次刷新世界纪录。这一突破将推动量子计算向实用化方向迈进。</p>
            
            <img src="https://picsum.photos/id/1/800/500" alt="量子计算实验室" class="article-image">
            <div class="image-caption">图："九章三号"量子计算原型机实验装置</div>
            
            <p>"九章三号"由中国科学技术大学潘建伟院士团队研制，在保持高光子数优势的同时，实现了光子态的精确调控，其处理特定问题的速度比目前全球最快的超级计算机快约100万亿倍。</p>
            
            <div class="article-quote">
                量子计算被认为是下一代信息技术的核心，有望在密码学、材料科学、药物研发等领域产生颠覆性影响。目前，全球主要科技国家都在加速量子计算的研发进程。
            </div>
            
            <p>据介绍，"九章三号"采用光量子计算路线，通过操纵光子的路径、偏振等自由度实现量子计算。与传统计算机相比，量子计算机利用量子叠加和量子纠缠等特性，可以在特定问题上实现指数级或多项式级的加速。</p>
            
            <div class="article-video">
                <img src="https://picsum.photos/id/201/800/450" alt="量子计算介绍视频封面" class="article-image" style="margin: 0; border-radius: var(--radius);">
                <div class="video-play-btn">
                    <i class="fas fa-play"></i>
                </div>
            </div>
            <div class="image-caption">视频："九章三号"量子计算原型机工作原理介绍</div>
            
            <p>专家表示，"九章三号"的研制成功，标志着我国在光量子计算领域继续保持国际领先地位，为未来实现可实用化的量子计算机奠定了坚实基础。下一步，研究团队将致力于提高量子计算的稳定性和可扩展性，推动量子计算在实际场景中的应用。</p>
        </div>
        
        <div class="tags-container">
            <span class="article-tag tag-hot">热点</span>
            <span class="article-tag">量子计算</span>
            <span class="article-tag">科技创新</span>
            <span class="article-tag">国家重大科技项目</span>
        </div>
        
        <div class="article-actions">
            <div class="action-btn active">
                <i class="far fa-heart"></i>
                <span>点赞 (2.4万)</span>
            </div>
            <div class="action-btn">
                <i class="far fa-comment"></i>
                <span>评论 (632)</span>
            </div>
            <div class="action-btn">
                <i class="far fa-star"></i>
                <span>收藏 (1.2万)</span>
            </div>
            <div class="action-btn">
                <i class="far fa-share-square"></i>
                <span>分享 (418)</span>
            </div>
        </div>
    </div>
    
    <!-- 相关推荐 -->
    <div class="related-articles">
        <h3 class="section-title">相关资讯</h3>
        
        <div class="related-item">
            <img src="https://picsum.photos/id/20/300" alt="相关资讯图片" class="related-image">
            <div class="related-content">
                <h4 class="related-title">全球量子计算竞赛升温，各国加速布局下一代计算技术</h4>
                <div class="related-source">科技日报 · 2天前</div>
            </div>
        </div>
        
        <div class="related-item">
            <img src="https://picsum.photos/id/21/300" alt="相关资讯图片" class="related-image">
            <div class="related-content">
                <h4 class="related-title">量子计算将如何改变我们的生活？专家解读五大应用场景</h4>
                <div class="related-source">科普中国 · 3天前</div>
            </div>
        </div>
        
        <div class="related-item">
            <img src="https://picsum.photos/id/22/300" alt="相关资讯图片" class="related-image">
            <div class="related-content">
                <h4 class="related-title">我国量子通信网络建设取得新进展，已实现千公里级量子密钥分发</h4>
                <div class="related-source">新华社 · 1周前</div>
            </div>
        </div>
    </div>
    
    <!-- 评论区 -->
    <div class="comments-section">
        <div class="comments-header">
            <div class="comments-count">全部评论 (632)</div>
            <div class="sort-comments">
                <span>热门</span>
                <i class="fas fa-chevron-down"></i>
            </div>
        </div>
        
        <!-- 评论输入框 -->
        <div class="comment-input-container">
            <img src="https://picsum.photos/id/91/100" alt="用户头像" class="user-avatar">
            <div class="comment-input-box">
                <textarea class="comment-input" placeholder="分享你的观点..."></textarea>
                <div class="input-actions">
                    <i class="fas fa-image input-action-btn"></i>
                    <i class="fas fa-smile input-action-btn"></i>
                    <button class="submit-comment">发布评论</button>
                </div>
            </div>
        </div>
        
        <!-- 评论列表 -->
        <div class="comments-list">
            <!-- 评论1 -->
            <div class="comment-item">
                <img src="https://picsum.photos/id/65/100" alt="评论者头像" class="comment-avatar">
                <div class="comment-content">
                    <div class="comment-header">
                        <div class="comment-author">科技爱好者小李</div>
                        <div class="comment-time">2小时前</div>
                    </div>
                    <div class="comment-text">
                        太厉害了！中国在量子计算领域的进步真是日新月异，从"九章"到"九章三号"，短短几年时间就实现了如此大的突破，为科研人员点赞！
                    </div>
                    <div class="comment-actions">
                        <div class="comment-action active">
                            <i class="far fa-heart"></i>
                            <span>245</span>
                        </div>
                        <div class="comment-action">
                            <i class="far fa-comment"></i>
                            <span>回复</span>
                        </div>
                    </div>
                    
                    <!-- 回复列表 -->
                    <div class="replies-list">
                        <div class="reply-item">
                            <img src="https://picsum.photos/id/66/100" alt="回复者头像" class="reply-avatar">
                            <div class="reply-content">
                                <div class="comment-header">
                                    <div class="comment-author">量子物理研究员</div>
                                    <div class="comment-time">1小时前</div>
                                </div>
                                <div class="reply-text">
                                    <span class="reply-to">@科技爱好者小李</span> 确实，这次255个光子的操纵是非常大的突破，意味着我们在量子态调控精度上又上了一个新台阶。
                                </div>
                                <div class="comment-actions">
                                    <div class="comment-action active">
                                        <i class="far fa-heart"></i>
                                        <span>56</span>
                                    </div>
                                    <div class="comment-action">
                                        <i class="far fa-comment"></i>
                                        <span>回复</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 回复输入框 -->
                        <div class="reply-input-container">
                            <img src="https://picsum.photos/id/91/100" alt="用户头像" class="reply-avatar">
                            <input type="text" class="reply-input" placeholder="回复 @量子物理研究员...">
                            <button class="reply-submit">发送</button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 评论2 -->
            <div class="comment-item">
                <img src="https://picsum.photos/id/67/100" alt="评论者头像" class="comment-avatar">
                <div class="comment-content">
                    <div class="comment-header">
                        <div class="comment-author">IT行业观察</div>
                        <div class="comment-time">5小时前</div>
                    </div>
                    <div class="comment-text">
                        想知道这种量子计算原型机什么时候能真正商用？目前看还处于实验室阶段，距离实际应用还有多长的路要走呢？
                    </div>
                    <div class="comment-actions">
                        <div class="comment-action">
                            <i class="far fa-heart"></i>
                            <span>89</span>
                        </div>
                        <div class="comment-action">
                            <i class="far fa-comment"></i>
                            <span>回复</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 评论3 -->
            <div class="comment-item">
                <img src="https://picsum.photos/id/68/100" alt="评论者头像" class="comment-avatar">
                <div class="comment-content">
                    <div class="comment-header">
                        <div class="comment-author">科普达人</div>
                        <div class="comment-time">昨天 18:45</div>
                    </div>
                    <div class="comment-text">
                        光量子计算和超导量子计算各有什么优势？为什么我们选择光量子路线进行突破？
                    </div>
                    <div class="comment-actions">
                        <div class="comment-action">
                            <i class="far fa-heart"></i>
                            <span>124</span>
                        </div>
                        <div class="comment-action">
                            <i class="far fa-comment"></i>
                            <span>回复</span>
                        </div>
                    </div>
                    
                    <!-- 回复列表 -->
                    <div class="replies-list">
                        <div class="reply-item">
                            <img src="https://picsum.photos/id/69/100" alt="回复者头像" class="reply-avatar">
                            <div class="reply-content">
                                <div class="comment-header">
                                    <div class="comment-author">物理系张教授</div>
                                    <div class="comment-time">昨天 20:12</div>
                                </div>
                                <div class="reply-text">
                                    <span class="reply-to">@科普达人</span> 光量子计算在相干时间和操作速度上有优势，而超导量子计算在 qubit 数量扩展上更具潜力。我国采取多路线并行的策略，在不同技术路线上都有布局。
                                </div>
                                <div class="comment-actions">
                                    <div class="comment-action active">
                                        <i class="far fa-heart"></i>
                                        <span>98</span>
                                    </div>
                                    <div class="comment-action">
                                        <i class="far fa-comment"></i>
                                        <span>回复</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 加载更多评论 -->
        <div class="load-more" style="margin-top: 10px;">
            <button class="load-more-btn">查看更多评论</button>
        </div>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="#" class="nav-tab">
            <i class="fas fa-home"></i>
            <span>首页</span>
        </a>
        <a href="#" class="nav-tab active">
            <i class="fas fa-newspaper"></i>
            <span>资讯</span>
        </a>
        <a href="#" class="nav-tab">
            <i class="fas fa-plus-circle"></i>
            <span>发布</span>
        </a>
        <a href="#" class="nav-tab">
            <i class="fas fa-bell"></i>
            <span>通知</span>
        </a>
        <a href="#" class="nav-tab">
            <i class="fas fa-user"></i>
            <span>我的</span>
        </a>
    </div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 文章操作按钮交互
        const actionButtons = document.querySelectorAll('.action-btn');
        actionButtons.forEach(button => {
            button.addEventListener('click', () => {
                // 点赞按钮切换状态
                if (button.querySelector('.far.fa-heart')) {
                    button.classList.toggle('active');
                    const icon = button.querySelector('i');
                    if (button.classList.contains('active')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                    }
                }
            });
        });
        
        // 评论操作交互
        const commentActions = document.querySelectorAll('.comment-action');
        commentActions.forEach(action => {
            action.addEventListener('click', () => {
                // 评论点赞切换状态
                if (action.querySelector('.far.fa-heart')) {
                    action.classList.toggle('active');
                    const icon = action.querySelector('i');
                    if (action.classList.contains('active')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                    }
                    
                    // 更新点赞数
                    const countEl = action.querySelector('span');
                    let count = parseInt(countEl.textContent);
                    count = action.classList.contains('active') ? count + 1 : count - 1;
                    countEl.textContent = count;
                }
                
                // 回复按钮点击
                if (action.querySelector('.far.fa-comment')) {
                    const commentItem = action.closest('.comment-item, .reply-item');
                    const repliesList = commentItem.querySelector('.replies-list') || 
                                      commentItem.parentElement.querySelector('.replies-list');
                    
                    // 如果没有回复输入框，则创建一个
                    if (!repliesList.querySelector('.reply-input-container')) {
                        const replyInputHtml = `
                            <div class="reply-input-container">
                                <img src="https://picsum.photos/id/91/100" alt="用户头像" class="reply-avatar">
                                <input type="text" class="reply-input" placeholder="回复...">
                                <button class="reply-submit">发送</button>
                            </div>
                        `;
                        repliesList.insertAdjacentHTML('beforeend', replyInputHtml);
                        
                        // 为新创建的回复框添加事件
                        const replySubmit = repliesList.querySelector('.reply-submit');
                        replySubmit.addEventListener('click', () => {
                            const replyInput = repliesList.querySelector('.reply-input');
                            const replyText = replyInput.value.trim();
                            if (replyText) {
                                // 这里可以添加提交回复的逻辑
                                alert('回复已提交: ' + replyText);
                                replyInput.value = '';
                            }
                        });
                    }
                }
            });
        });
        
        // 评论排序切换
        const sortComments = document.querySelector('.sort-comments');
        sortComments.addEventListener('click', () => {
            const sortText = sortComments.querySelector('span');
            sortText.textContent = sortText.textContent === '热门' ? '最新' : '热门';
        });
        
        // 发布评论
        const submitComment = document.querySelector('.submit-comment');
        submitComment.addEventListener('click', () => {
            const commentInput = document.querySelector('.comment-input');
            const commentText = commentInput.value.trim();
            if (commentText) {
                // 这里可以添加提交评论的逻辑
                alert('评论已发布: ' + commentText);
                commentInput.value = '';
            }
        });
        
        // 加载更多评论
        const loadMoreComments = document.querySelector('.load-more-btn');
        loadMoreComments.addEventListener('click', () => {
            loadMoreComments.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 加载中...';
            
            // 模拟加载延迟
            setTimeout(() => {
                loadMoreComments.textContent = '查看更多评论';
                // 实际项目中添加加载更多评论的逻辑
            }, 1500);
        });
        
        // 底部导航切换
        const navTabs = document.querySelectorAll('.nav-tab');
        navTabs.forEach(tab => {
            tab.addEventListener('click', (e) => {
                e.preventDefault();
                navTabs.forEach(t => t.classList.remove('active'));
                tab.classList.add('active');
            });
        });
    </script>
</body>
</html>
    
